<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 标签管理 -->
        <!-- 面包屑 -->
        <el-breadcrumb v-if="$route.query.id"
        separator-class="el-icon-arrow-right"
        style="border-bottom:1px solid #e8e8e8 ;padding-bottom:20px ;margin-bottom:15px">
          <el-breadcrumb-item >学科管理</el-breadcrumb-item>
          <el-breadcrumb-item >{{$route.query.name}}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索框 -->
        <el-form  :model="queryParams">
           <div class="container-form">
              <el-form-item >
                <span>标签名称</span>
                 <el-input
                  v-model="queryParams.tagName"
                  class="form-input"
                  size="small"
                  style="width: 200px;"></el-input>
                <span>状态</span>
                <el-select
                size="small"
                style="width: 200px;"
                v-model="queryParams.state"
                placeholder="请选择">
                  <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
                </el-select>
                <el-button size="small" class="form-button" @click="clear">清除</el-button>
                <el-button size="small" type="primary" @click="search">搜索</el-button>
              </el-form-item>
              <el-form-item >
                  <el-button v-if="$route.query.id"  @click="$router.back()" type="text" class="el-icon-back">  返回学科</el-button>
                <el-button
                    @click="openShowDialog('add')"
                    size="small"
                    style="margin-left: 10px;"
                    type="success"
                    icon="el-icon-edit"
                >新增标签</el-button>
              </el-form-item>
           </div>
        </el-form>
        <!-- 警告框 -->
        <el-alert
         :title="total"
          type="info"
          class="alert"
          show-icon
          :closable="false"
        >
          </el-alert>
        <!-- 表格 -->
        <el-table
        :data="tagsList"
        :header-cell-style="{background:'#fafafa'}"
        style="margin-top: 10px">
          <el-table-column  type="index" label="序号" width="80" class="aaa"></el-table-column>
          <el-table-column  prop="subjectName" label="所属学科" ></el-table-column>
          <el-table-column  prop="tagName" label="标签名称" ></el-table-column>
          <el-table-column  prop="username" label="创建者"></el-table-column>
          <el-table-column  prop="addDate" label="创建日期" >
            <template #default="{row}">
              <span>{{ formData(row.addDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column  prop="state" label="状态">
            <template #default="{row}">
                <span v-if="row.state === 1">已启用</span>
                <span v-else-if="row.state === 0">已禁用</span>
            </template>
          </el-table-column>
          <el-table-column   label="操作" width="150px"  >
            <template #default="{row}">
              <el-button type="text" @click="stateClick(row)" >
                <span>{{ row.state === 0 ? '启用':'禁用' }}</span>
              </el-button>
              <el-button  :disabled="row.state === 1" type="text" @click="openShowDialog('edit',row.id)">修改</el-button>
              <el-button  :disabled="!!row.state" type="text" @click="delClick(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="end" align="middle" style="height:60px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :current-page="queryParams.page"
            :page-size="queryParams.pagesize"
            :page-sizes="[5, 10, 20, 50]"
            layout="  prev, pager, next,sizes, jumper"
            :total="counts"
            @current-change="handleCurrentChange">
          </el-pagination>
        </el-row>

      </el-card>
      <!-- 弹层 -->
      <tags-add
      ref='addTags'
      :tagsList="tagsList"
      :tagsShowDialog.sync="tagsShowDialog"
      :currentID="currentID"
      @getTagsList="getTagsList"
      @updatePage="updatePage"></tags-add>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
// 引入转时间戳
import dayjs from 'dayjs'
import { list, remove, changeState } from '@/api/hmmm/tags'
import tagsAdd from '../components/tags-add.vue'
export default {
  components: { tagsAdd },
  data () {
    return {
      // 标签表格列表
      tagsList: [],
      queryParams: {
        page: 1, // 当前页数
        pagesize: 10, // 页尺寸
        subjectID: null, // 学科ID
        tagName: '', // 标签名称
        state: null // 状态 1 开启 0 屏蔽
      },
      counts: 0, // 总条数
      tagsShowDialog: false, // 控制弹层显示或隐藏
      currentID: null // 记录当前选中id
    }
  },
  created () {
    // 获取标签表格列表
    this.getTagsList()
    // 接收路由传递的参数
    console.log(this.$route.query.id)
    console.log(this.$route.query.name)
  },
  computed: {
    // 总条数
    total () {
      return `数据一 ${this.counts} 共条`
    },
    // 控制启用和禁用状态
    status () {
      return status
    }
  },
  methods: {
    // 获取标签表格列表
    async getTagsList () {
      const { data: { items, counts } } = await list(this.queryParams)
      console.log('列表数据', items)
      this.tagsList = items
      console.log('总条数', counts)
      this.counts = counts
      // this.queryParams.page = 1
    },
    // 点击切换页码
    handleCurrentChange (newPage) {
      this.queryParams.page = newPage
      // 刷新获取标签表格列表
      this.getTagsList()
    },
    // 点击切换每页条数
    handleSizeChange (val) {
      this.queryParams.pagesize = val
      console.log(`每页 ${val} 条`)
      // 刷新获取标签表格列表
      this.getTagsList()
    },
    // 转时间戳
    formData (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    },
    // 打开弹层
    openShowDialog (type, id) {
      // 编辑
      if (type === 'add') {
        // 打开弹层
        this.tagsShowDialog = true
        this.currentID = id
      } else if (type === 'edit') {
        // 打开弹层
        this.tagsShowDialog = true
        this.currentID = id
        console.log(id)
        // 数据回显
        this.$nextTick(() => {
          this.$refs.addTags.detailList()
        })
      }
    },
    // 删除
    delClick (id) {
      console.log(111111)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 判断当前列表长度等于一与当前页码值大于一时当前页码值减一
        if (this.tagsList.length === 1 && this.queryParams.page > 1) {
          this.queryParams.page--
        }
        // 调取接口
        await remove({ id, ...this.tagsList })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 重新刷新列表
        this.getTagsList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 搜索
    search () {
      this.queryParams.page = 1
      this.getTagsList()
    },
    // 清空
    clear () {
      this.queryParams.tagName = ''
      this.queryParams.state = null
    },
    // 更换状态
    // 启用、禁用
    async stateClick (row) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      var data = {
        id: row.id,
        state: Number(!row.state)
      }
      await changeState(data)
      this.getTagsList()
    },
    // 修改页码值为1
    updatePage () {
      this.queryParams.page = 1
    }
  }
}
</script>

<style  lang="scss" scoped>
.container-form{
  display: flex;
  justify-content: space-between;
  span{
    font-weight: bold;
    color: #606266;
    margin-right: 5px;
  }
  .form-input{
    margin-right: 50px;
  }
  .form-button{
    margin-left: 10px;
  }
  .el-table__empty-block{
    border-top: 5px solid #000;
  }

}
</style>
